<!-- 商品列表，大图加横向滑动小图 -->
<template>
  <div class="goods_list1">
    <div class="big_img"><img :src="goods_list_img" alt=""><i class="arrow"></i></div>
    <div class="goods_list_con_w" ref="goods_list_scroll">
      <div class="goods_list_con">
        <div class="content" v-for="(item,index) of goods_list_data" :key="index" @click="goods_link(item.h5_url)">
          <div class="small_img"><img v-lazy="item.img_url" alt=""></div>
          <div class="title">{{item.product_name}}</div>
          <div class="price"><span class="now_price">&yen;{{item.sale_price}}</span><span class="old_price">&yen;{{item.price}}</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
    name: 'GoodsList1',
    props:{
      goods_list_data:Array,
      goods_list_img:String
    },
    methods:{
      goods_link(e){
        window.location.href = e
      }
    },
    mounted(){
      this.scroll=new Bscroll(this.$refs.goods_list_scroll,{scrollX: true,scrollY: false})
    }
}

</script>

<style lang="stylus" scoped>
.goods_list1{width:100%;overflow:hidden;margin-top:0.2rem;background:#fff;}
.big_img{width:100%;overflow:hidden;height:0;padding-bottom:49.907%;position:relative;}
.big_img img{width:100%;}
.big_img .arrow{position: absolute;left: 50%;margin-left: -0.0866665rem;bottom: 0;width: 0;height: 0;border-left: 0.173333rem solid transparent;border-right: 0.173333rem solid transparent;border-bottom: 0.173333rem solid #fff;z-index: 2;}
.goods_list_con_w{width:100%;overflow:hidden;}
.goods_list_con{white-space: nowrap;display: inline-block;padding:0 0.2rem;box-sizing:border-box;}
.content{width:2.15rem;display: inline-block;padding-bottom:0.2rem;margin-left:0.2rem;}
.content:nth-child(1){margin-left:0;}
.small_img{width:100%;height:0;padding-bottom:100%;}
.small_img img{width:100%;}
.title{height:0.6rem;line-height:0.3rem;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;font-size:0.2rem;color:#363636;font-weight:normal;white-space:normal;}
.price{font-size:0.2rem;color:#df4b53;margin-top:0.1rem;}
.price span{display:inline-block;}
.price .now_price{}
.price .old_price{margin-left:0.2rem;color:#aaa;text-decoration:line-through;}
</style>